રીએક્ટ કસ્ટમ હુક્સ: પુનઃઉપયોગીતા માટે કમ્પોનન્ટ લોજિકનું નિષ્કર્ષણ

રીએક્ટ હુક્સે રીએક્ટ કમ્પોનન્ટ્સ લખવાની રીતમાં ક્રાંતિ લાવી છે, જે સ્ટેટ અને સાઇડ ઇફેક્ટ્સનું સંચાલન કરવાની વધુ ભવ્ય અને કાર્યક્ષમ રીત પ્રદાન કરે છે. ઉપલબ્ધ વિવિધ હુક્સ પૈકી, કસ્ટમ હુક્સ કમ્પોનન્ટ લોજિકને નિષ્કર્ષિત કરવા અને પુનઃઉપયોગ કરવા માટેના એક શક્તિશાળી સાધન તરીકે ઉભરી આવે છે. આ લેખ રીએક્ટ કસ્ટમ હુક્સને સમજવા અને અમલમાં મૂકવા માટે એક વ્યાપક માર્ગદર્શિકા પ્રદાન કરે છે, જે તમને વધુ જાળવણીક્ષમ, પરીક્ષણક્ષમ અને સ્કેલેબલ એપ્લિકેશન્સ બનાવવામાં સક્ષમ બનાવે છે.

રીએક્ટ કસ્ટમ હુક્સ શું છે?

સારમાં, કસ્ટમ હૂક એક જાવાસ્ક્રિપ્ટ ફંક્શન છે જેનું નામ "use" થી શરૂ થાય છે અને અન્ય હુક્સને કૉલ કરી શકે છે. તે તમને કમ્પોનન્ટ લોજિકને પુનઃઉપયોગી ફંક્શન્સમાં નિષ્કર્ષિત કરવાની મંજૂરી આપે છે, જેનાથી કોડ ડુપ્લિકેશન દૂર થાય છે અને સ્વચ્છ કમ્પોનન્ટ સ્ટ્રક્ચરને પ્રોત્સાહન મળે છે. નિયમિત રીએક્ટ કમ્પોનન્ટ્સથી વિપરીત, કસ્ટમ હુક્સ કોઈ UI રેન્ડર કરતા નથી; તેઓ ફક્ત લોજિકને સમાવે છે.

તેમને પુનઃઉપયોગી ફંક્શન્સ તરીકે વિચારો જે રીએક્ટ સ્ટેટ અને લાઇફસાઇકલ સુવિધાઓને ઍક્સેસ કરી શકે છે. તેઓ વિવિધ કમ્પોનન્ટ્સ વચ્ચે સ્ટેટફુલ લોજિક શેર કરવાની એક અદ્ભુત રીત છે, જેમાં હાયર-ઓર્ડર કમ્પોનન્ટ્સ અથવા રેન્ડર પ્રોપ્સનો આશ્રય લીધા વિના, જે ઘણીવાર વાંચવા અને જાળવવા મુશ્કેલ કોડ તરફ દોરી શકે છે.

કસ્ટમ હુક્સનો ઉપયોગ શા માટે કરવો?

કસ્ટમ હુક્સનો ઉપયોગ કરવાના ફાયદા અસંખ્ય છે:

• પુનઃઉપયોગીતા: લોજિક એકવાર લખો અને તેને બહુવિધ કમ્પોનન્ટ્સમાં ફરીથી ઉપયોગ કરો. આ કોડ ડુપ્લિકેશનને નોંધપાત્ર રીતે ઘટાડે છે અને તમારી એપ્લિકેશનને વધુ જાળવણીક્ષમ બનાવે છે.
• સુધારેલ કોડ સંગઠન: જટિલ લોજિકને કસ્ટમ હુક્સમાં નિષ્કર્ષિત કરવાથી તમારા કમ્પોનન્ટ્સ સ્વચ્છ બને છે, તેમને વાંચવા અને સમજવામાં સરળ બનાવે છે. કમ્પોનન્ટ્સ તેમની મુખ્ય રેન્ડરિંગ જવાબદારીઓ પર વધુ ધ્યાન કેન્દ્રિત કરે છે.
• વધારેલ પરીક્ષણક્ષમતા: કસ્ટમ હુક્સને એકલામાં સરળતાથી પરીક્ષણ કરી શકાય છે. તમે કમ્પોનન્ટને રેન્ડર કર્યા વિના હૂકના લોજિકનું પરીક્ષણ કરી શકો છો, જે વધુ મજબૂત અને વિશ્વસનીય પરીક્ષણો તરફ દોરી જાય છે.
• વધારેલ જાળવણીક્ષમતા: જ્યારે લોજિક બદલાય છે, ત્યારે તમારે તેને ફક્ત એક જ જગ્યાએ – કસ્ટમ હૂકમાં – અપડેટ કરવાની જરૂર છે, જ્યાં તેનો ઉપયોગ થાય છે તે દરેક કમ્પોનન્ટમાં નહીં.
• ઘટાડેલ બોઇલરપ્લેટ: કસ્ટમ હુક્સ સામાન્ય પેટર્ન અને પુનરાવર્તિત કાર્યોને સમાવી શકે છે, જેનાથી તમારે તમારા કમ્પોનન્ટ્સમાં લખવાની જરૂર પડે તે બોઇલરપ્લેટ કોડની માત્રા ઘટે છે.

તમારો પ્રથમ કસ્ટમ હૂક બનાવવો

ચાલો એક વ્યવહારિક ઉદાહરણ સાથે કસ્ટમ હૂક બનાવટ અને ઉપયોગનું વર્ણન કરીએ: API માંથી ડેટા મેળવવો.

ઉદાહરણ: useFetch - ડેટા ફેચિંગ હૂક

કલ્પના કરો કે તમારે તમારી રીએક્ટ એપ્લિકેશનમાં વારંવાર વિવિધ APIs માંથી ડેટા મેળવવાની જરૂર છે. દરેક કમ્પોનન્ટમાં ફેચ લોજિકનું પુનરાવર્તન કરવાને બદલે, તમે એક useFetch હૂક બનાવી શકો છો.

            
import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url, { signal: signal });
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setError(null); // Clear any previous errors
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          setError(error);
        }
        setData(null); // Clear any previous data
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      abortController.abort(); // Cleanup function to abort the fetch on unmount or URL change
    };
  }, [url]); // Re-run effect when the URL changes

  return { data, loading, error };
}

export default useFetch;

            

              
                Copy
              
            
          

સમજૂતી:

• સ્ટેટ વેરિયેબલ્સ: હૂક useState નો ઉપયોગ ડેટા, લોડિંગ સ્ટેટ અને એરર સ્ટેટનું સંચાલન કરવા માટે કરે છે.
• useEffect: જ્યારે url પ્રોપ બદલાય છે ત્યારે useEffect હૂક ડેટા ફેચિંગ કરે છે.
• એરર હેન્ડલિંગ: હૂકમાં ફેચ ઓપરેશન દરમિયાન સંભવિત ભૂલોને પકડવા માટે એરર હેન્ડલિંગ શામેલ છે. પ્રતિસાદ સફળ છે તેની ખાતરી કરવા માટે સ્ટેટસ કોડ તપાસવામાં આવે છે.
• લોડિંગ સ્ટેટ: ડેટા હજુ પણ ફેચ થઈ રહ્યો છે કે નહીં તે દર્શાવવા માટે loading સ્ટેટનો ઉપયોગ થાય છે.
• AbortController: કમ્પોનન્ટ અનમાઉન્ટ થાય અથવા URL બદલાય તો ફેચ રિક્વેસ્ટને કેન્સલ કરવા માટે AbortController API નો ઉપયોગ કરે છે. આ મેમરી લીકને અટકાવે છે.
• રિટર્ન વેલ્યુ: હૂક data, loading અને error સ્ટેટ્સ ધરાવતો ઑબ્જેક્ટ પરત કરે છે.

કમ્પોનન્ટમાં useFetch હૂકનો ઉપયોગ કરવો

હવે, ચાલો જોઈએ કે આ કસ્ટમ હૂકનો રીએક્ટ કમ્પોનન્ટમાં કેવી રીતે ઉપયોગ કરવો:

            
import React from 'react';
import useFetch from './useFetch';

function UserList() {
  const { data: users, loading, error } = useFetch('https://jsonplaceholder.typicode.com/users');

  if (loading) return <p>Loading users...</p>;
  if (error) return <p>Error: {error.message}</p>;
  if (!users) return <p>No users found.</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
}

export default UserList;

            

              
                Copy
              
            
          

સમજૂતી:

• કમ્પોનન્ટ useFetch હૂકને ઇમ્પોર્ટ કરે છે.
• તે API URL સાથે હૂકને કૉલ કરે છે.
• તે પરત કરેલા ઑબ્જેક્ટને data (જેને users માં પુનઃનામિત કરવામાં આવ્યું છે), loading અને error સ્ટેટ્સને ઍક્સેસ કરવા માટે ડીસ્ટ્રક્ચર કરે છે.
• તે loading અને error સ્ટેટ્સના આધારે શરતી રીતે અલગ કન્ટેન્ટ રેન્ડર કરે છે.
• જો ડેટા ઉપલબ્ધ હોય, તો તે વપરાશકર્તાઓની સૂચિ રેન્ડર કરે છે.

એડવાન્સ્ડ કસ્ટમ હૂક પેટર્ન

સામાન્ય ડેટા ફેચિંગ ઉપરાંત, કસ્ટમ હુક્સનો ઉપયોગ વધુ જટિલ લોજિકને સમાવવા માટે થઈ શકે છે. અહીં કેટલીક એડવાન્સ્ડ પેટર્ન આપેલી છે:

1. useReducer સાથે સ્ટેટ મેનેજમેન્ટ

વધુ જટિલ સ્ટેટ મેનેજમેન્ટ પરિસ્થિતિઓ માટે, તમે કસ્ટમ હુક્સને useReducer સાથે જોડી શકો છો. આ તમને વધુ અનુમાનિત અને વ્યવસ્થિત રીતે સ્ટેટ ટ્રાન્ઝિશનનું સંચાલન કરવાની મંજૂરી આપે છે.

            
import { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function useCounter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement' });

  return { count: state.count, increment, decrement };
}

export default useCounter;

            

              
                Copy
              
            
          

ઉપયોગ:

            
import React from 'react';
import useCounter from './useCounter';

function Counter() {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

2. useContext સાથે કન્ટેક્સ્ટ ઇન્ટિગ્રેશન

કસ્ટમ હુક્સનો ઉપયોગ રીએક્ટ કન્ટેક્સ્ટ સુધી પહોંચને સરળ બનાવવા માટે પણ કરી શકાય છે. તમારા કમ્પોનન્ટ્સમાં સીધા useContext નો ઉપયોગ કરવાને બદલે, તમે એક કસ્ટમ હૂક બનાવી શકો છો જે કન્ટેક્સ્ટ ઍક્સેસ લોજિકને સમાવે છે.

            
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // Assuming you have a ThemeContext

function useTheme() {
  return useContext(ThemeContext);
}

export default useTheme;

            

              
                Copy
              
            
          

ઉપયોગ:

            
import React from 'react';
import useTheme from './useTheme';

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div style={{ backgroundColor: theme.background, color: theme.color }}>
      <p>This is my component.</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

3. ડીબાઉન્સિંગ અને થ્રોટલિંગ

ડીબાઉન્સિંગ અને થ્રોટલિંગ એ એવી તકનીકો છે જેનો ઉપયોગ ફંક્શનને અમલમાં મૂકવાના દરને નિયંત્રિત કરવા માટે થાય છે. કસ્ટમ હુક્સનો ઉપયોગ આ લોજિકને સમાવવા માટે કરી શકાય છે, જેનાથી ઇવેન્ટ હેન્ડલર્સમાં આ તકનીકોને લાગુ પાડવી સરળ બને છે.

            
import { useState, useEffect, useRef } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

            

              
                Copy
              
            
          

ઉપયોગ:

            
import React, { useState } from 'react';
import useDebounce from './useDebounce';

function SearchInput() {
  const [searchValue, setSearchValue] = useState('');
  const debouncedSearchValue = useDebounce(searchValue, 500); // Debounce for 500ms

  useEffect(() => {
    // Perform search with debouncedSearchValue
    console.log('Searching for:', debouncedSearchValue);
    // Replace console.log with your actual search logic
  }, [debouncedSearchValue]);

  const handleChange = (event) => {
    setSearchValue(event.target.value);
  };

  return (
    <input
      type="text"
      value={searchValue}
      onChange={handleChange}
      placeholder="Search..."
    />
  );
}

export default SearchInput;

            

              
                Copy
              
            
          

કસ્ટમ હુક્સ લખવા માટેની શ્રેષ્ઠ પદ્ધતિઓ

તમારા કસ્ટમ હુક્સ અસરકારક અને જાળવણીક્ષમ છે તેની ખાતરી કરવા માટે, આ શ્રેષ્ઠ પદ્ધતિઓનું પાલન કરો:

• "use" થી શરૂ કરો: હંમેશા તમારા કસ્ટમ હુક્સને "use" ઉપસર્ગથી નામ આપો. આ પરંપરા રીએક્ટને સંકેત આપે છે કે ફંક્શન હુક્સના નિયમોનું પાલન કરે છે અને કાર્યાત્મક કમ્પોનન્ટ્સમાં ઉપયોગ કરી શકાય છે.
• ધ્યાન કેન્દ્રિત રાખો: દરેક કસ્ટમ હૂકનો સ્પષ્ટ અને ચોક્કસ હેતુ હોવો જોઈએ. વધુ પડતા જટિલ હુક્સ બનાવવાનું ટાળો જે ઘણી બધી જવાબદારીઓ સંભાળે છે.
• ઉપયોગી મૂલ્યો પરત કરો: એક ઑબ્જેક્ટ પરત કરો જેમાં હૂકનો ઉપયોગ કરતા કમ્પોનન્ટને જરૂરી તમામ મૂલ્યો અને ફંક્શન્સ શામેલ હોય. આ હૂકને વધુ લવચીક અને પુનઃઉપયોગી બનાવે છે.
• ભૂલોને સુંદર રીતે હેન્ડલ કરો: તમારા કમ્પોનન્ટ્સમાં અનપેક્ષિત વર્તનને રોકવા માટે તમારા કસ્ટમ હુક્સમાં એરર હેન્ડલિંગ શામેલ કરો.
• ક્લીનઅપનો વિચાર કરો: મેમરી લીક અટકાવવા અને યોગ્ય સંસાધન વ્યવસ્થાપન સુનિશ્ચિત કરવા માટે useEffect માં ક્લીનઅપ ફંક્શનનો ઉપયોગ કરો. સબ્સ્ક્રિપ્શન્સ, ટાઈમર અથવા ઇવેન્ટ લિસનર્સ સાથે કામ કરતી વખતે આ ખાસ કરીને મહત્વનું છે.
• પરીક્ષણો લખો: તમારા કસ્ટમ હુક્સને અલગથી સંપૂર્ણ રીતે પરીક્ષણ કરો જેથી તેઓ અપેક્ષા મુજબ વર્તે છે તેની ખાતરી કરી શકાય.
• તમારા હુક્સનું દસ્તાવેજીકરણ કરો: તમારા કસ્ટમ હુક્સ માટે સ્પષ્ટ દસ્તાવેજીકરણ પ્રદાન કરો, જેમાં તેમનો હેતુ, ઉપયોગ અને કોઈપણ સંભવિત મર્યાદાઓ સમજાવવામાં આવે.

વૈશ્વિક વિચારણાઓ

વૈશ્વિક પ્રેક્ષકો માટે એપ્લિકેશન્સ વિકસાવતી વખતે, નીચેની બાબતો ધ્યાનમાં રાખો:

• આંતરરાષ્ટ્રીયકરણ (i18n) અને સ્થાનિકીકરણ (l10n): જો તમારો કસ્ટમ હૂક વપરાશકર્તા-લક્ષી ટેક્સ્ટ અથવા ડેટા સાથે કામ કરે છે, તો તે વિવિધ ભાષાઓ અને પ્રદેશો માટે કેવી રીતે આંતરરાષ્ટ્રીયકૃત અને સ્થાનિકીકૃત થશે તે ધ્યાનમાં લો. આમાં react-intl અથવા i18next જેવી લાઇબ્રેરીનો ઉપયોગ શામેલ હોઈ શકે છે.
• તારીખ અને સમય ફોર્મેટિંગ: વિશ્વભરમાં ઉપયોગમાં લેવાતા વિવિધ તારીખ અને સમય ફોર્મેટ્સ વિશે ધ્યાન રાખો. દરેક વપરાશકર્તા માટે તારીખો અને સમય યોગ્ય રીતે પ્રદર્શિત થાય તેની ખાતરી કરવા માટે યોગ્ય ફોર્મેટિંગ ફંક્શન્સ અથવા લાઇબ્રેરીઓનો ઉપયોગ કરો.
• ચલણ ફોર્મેટિંગ: તેવી જ રીતે, વિવિધ પ્રદેશો માટે ચલણ ફોર્મેટિંગને યોગ્ય રીતે હેન્ડલ કરો.
• સુલભતા (a11y): ખાતરી કરો કે તમારા કસ્ટમ હુક્સ તમારી એપ્લિકેશનની સુલભતાને નકારાત્મક રીતે અસર કરતા નથી. વિકલાંગ વપરાશકર્તાઓને ધ્યાનમાં લો અને સુલભતા શ્રેષ્ઠ પદ્ધતિઓનું પાલન કરો.
• પ્રદર્શન: તમારા કસ્ટમ હુક્સના સંભવિત પ્રદર્શન પ્રભાવો વિશે ધ્યાન રાખો, ખાસ કરીને જ્યારે જટિલ લોજિક અથવા મોટા ડેટાસેટ્સ સાથે કામ કરતા હોય. તમારો કોડ ઑપ્ટિમાઇઝ કરો જેથી તે વિવિધ સ્થળોએ વિવિધ નેટવર્ક સ્પીડ ધરાવતા વપરાશકર્તાઓ માટે સારી રીતે કાર્ય કરે.

ઉદાહરણ: કસ્ટમ હૂક સાથે આંતરરાષ્ટ્રીયકૃત તારીખ ફોર્મેટિંગ

            
import { useState, useEffect } from 'react';
import { DateTimeFormat } from 'intl';

function useFormattedDate(date, locale) {
  const [formattedDate, setFormattedDate] = useState('');

  useEffect(() => {
    try {
      const formatter = new DateTimeFormat(locale, {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      });
      setFormattedDate(formatter.format(date));
    } catch (error) {
      console.error('Error formatting date:', error);
      setFormattedDate('Invalid Date');
    }
  }, [date, locale]);

  return formattedDate;
}

export default useFormattedDate;

            

              
                Copy
              
            
          

ઉપયોગ:

            
import React from 'react';
import useFormattedDate from './useFormattedDate';

function MyComponent() {
  const today = new Date();
  const enDate = useFormattedDate(today, 'en-US');
  const frDate = useFormattedDate(today, 'fr-FR');
  const deDate = useFormattedDate(today, 'de-DE');

  return (
    <div>
      <p>US Date: {enDate}</p>
      <p>French Date: {frDate}</p>
      <p>German Date: {deDate}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

નિષ્કર્ષ

રીએક્ટ કસ્ટમ હુક્સ કમ્પોનન્ટ લોજિકને નિષ્કર્ષિત કરવા અને પુનઃઉપયોગ કરવા માટે એક શક્તિશાળી પદ્ધતિ છે. કસ્ટમ હુક્સનો લાભ લઈને, તમે સ્વચ્છ, વધુ જાળવણીક્ષમ અને પરીક્ષણક્ષમ કોડ લખી શકો છો. જેમ જેમ તમે રીએક્ટમાં વધુ નિપુણ બનશો, તેમ તેમ કસ્ટમ હુક્સમાં નિપુણતા મેળવવાથી જટિલ અને સ્કેલેબલ એપ્લિકેશન્સ બનાવવાની તમારી ક્ષમતામાં નોંધપાત્ર સુધારો થશે. યાદ રાખો કે શ્રેષ્ઠ પદ્ધતિઓનું પાલન કરો અને કસ્ટમ હુક્સ વિકસાવતી વખતે વૈશ્વિક પરિબળોને ધ્યાનમાં લો જેથી તેઓ વૈવિધ્યસભર પ્રેક્ષકો માટે અસરકારક અને સુલભ હોય. કસ્ટમ હુક્સની શક્તિને અપનાવો અને તમારી રીએક્ટ ડેવલપમેન્ટ કુશળતાને ઉન્નત કરો!